<template>
  <div>
    <div id="salesChart" style="width: 600px;height:400px;"></div>
    <div id="userGrowthChart" style="width: 600px;height:400px;"></div>
    <div id="goodsSalesChart" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      salesData: [],
      userGrowthData: [],
      goodsSalesData: []
    };
  },
  mounted() {
    this.fetchSalesData();
    this.fetchUserGrowthData();
    this.fetchGoodsSalesData();
  },
    methods: {
    fetchSalesData() {
      axios.get('/api/statistics/sales').then(response => {
        this.salesData = response.data;
        this.initSalesChart();
      });
    },
    initUserGrowthChart() {
      const chart = echarts.init(document.getElementById('userGrowthChart'));
      chart.setOption({
        xAxis: {
          type: 'category',
          data: this.userGrowthData.map(item => item.date)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.userGrowthData.map(item => item.users),
          type: 'line'
        }]
      });
    },
    initGoodsSalesChart() {
      const chart = echarts.init(document.getElementById('goodsSalesChart'));
      chart.setOption({
        xAxis: {
          type: 'category',
          data: this.goodsSalesData.map(item => item.goods)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.goodsSalesData.map(item => item.sales),
          type: 'bar'
        }]
      });
    },
    fetchGoodsSalesData() {
      axios.get('/api/statistics/goodsSales').then(response => {
        this.goodsSalesData = response.data;
        this.initGoodsSalesChart();
      });
    },
    initSalesChart() {
      const chart = echarts.init(document.getElementById('salesChart'));
      chart.setOption({
        xAxis: {
          type: 'category',
          data: this.salesData.map(item => item.date)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.salesData.map(item => item.sales),
          type: 'line'
        }]
      });
    }
  }
};
</script>